<template>
	<view class="index" v-if="loadStatus">


		<view class="count bg-theme padding flex text-black solid-top justify-around">
			<view class="item text-center">
				<view class="amount text-df text-bold">{{numberFormatter(balance)}}</view>
				<view class="name text-sm">总余额</view>
			</view>

			<view class="item text-center">
				<view class="amount text-df text-bold">{{numberFormatter(myBalance)}}</view>
				<view class="name text-sm">我的余额</view>
			</view>

			<view class="item text-center">
				<view class="amount text-df text-bold">{{numberFormatter(otherBalance)}}</view>
				<view class="name text-sm">共享余额</view>
			</view>
		</view>

		<block v-if="accountList.length > 0">
			<view class="list">
				<block v-for="(item, index) in accountList" :key="index">
					<view class="item">
						<image :src="item.logo_image" mode="widthFix"></image>
						<view class="name text-sm">{{item.name}}</view>
						<view class="footer flex justify-between align-center margin-top">
							<view class="price text-price text-bold">{{numberFormatter(item.balance)}}</view>
							<view class="btns" v-if="userInfo.id == item.user_id">
								<view class="btn cu-btn bg-white round margin-right-xs" @tap="edit(item)">编辑</view>
								<view class="btn cu-btn bg-white round text-red" @tap="del(item, index)">删除</view>
							</view>
						</view>
					</view>
				</block>
			</view>

		</block>


		<view class="no-data" v-else>
			你还没有添加帐户...
		</view>

		<navigator url="/pages/account/transfer" class="transfer">
			转帐
		</navigator>

		<view url="/pages/account/edit" class="add" @tap="onAddAccount">
			<image src="/static/tabbar/add.png" mode=""></image>
		</view>

		
	</view>
</template>

<script>
	var that;
	let rewardedVideoAd = null
	import {
		mapState, mapMutations
	} from 'vuex';
	import accountModel from '../../models/AccountModel';
import UserModel from '../../models/UserModel';

	export default {
		computed: {
			...mapState(['userInfo'])
		},
		data() {
			return {
				loadStatus: false,
				balance: 0,
				myBalance: 0,
				otherBalance: 0,
				accountList: []
			}
		},
		async onLoad() {
			that = this;
			uni.showLoading();

			await this.get_account_list()
			that.loadStatus = true;
			uni.hideLoading();

			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-85a3d2051893c284'
				})
				rewardedVideoAd.onLoad(() => {
					console.log('onLoad event emit 激励视频 广告加载成功')
				})
				rewardedVideoAd.onError((err) => {
					console.log('onError event emit', err)
				})
				rewardedVideoAd.onClose((res) => {
					console.log('onClose event emit', res)
					if (res && res.isEnded) {
						UserModel.addAccount().then(result => {
							this.userInfo.account_number ++ 
							this.changeUserInfo(this.userInfo)
							this.onAddAccount()
						})
					}
				})
			}
		},
		async onPullDownRefresh() {
			await that.get_account_list()
			uni.stopPullDownRefresh();
		},
		methods: {
			...mapMutations(['changeUserInfo']),
			onAddAccount() {
				if (this.accountList.length >= this.userInfo.account_number) {
					uni.showModal({
						title: '提示',
						content: '你的默认账户数量已用完，请观看广告获得账户数量',
						success(res) {
							if(res.confirm) {
								that.showAd()
							}
						}
					})
				} else {
					uni.navigateTo({
						url: '/pages/account/edit'
					})
				}
			},
			refresh() {
				console.log('刷新');
			},
			//获取帐号列表
			async get_account_list() {
				const res = await accountModel.all()
				that.accountList = res.data
				let totalAmount = 0
				let myAmount = 0
				let otherAmount = 0
				res.data.forEach(item => {
					totalAmount += item.balance
					if (item.user_id == this.userInfo.id) {
						myAmount += item.balance
					} else {
						otherAmount += item.balance
					}
				})
				this.balance = totalAmount.toFixed(2)
				this.myBalance = myAmount.toFixed(2)
				this.otherBalance = otherAmount.toFixed(2)

			},
			//编辑
			edit(item) {
				uni.navigateTo({
					url: '/pages/account/edit?detail=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			//删除
			del(item, index) {
				uni.showModal({
					title: '提示',
					content: '确认删除该帐户吗？',
					success: e => {
						if (e.confirm) {
							accountModel.del(item.id).then(res => {
								if (res.code == 200) {
									that.get_account_list()
									this.$base.getFundsType()
									uni.showToast({
										title: res.msg
									})
								}
							})
						}
					}
				})
			},
			showAd() {
				rewardedVideoAd.show()
					.catch(() => {
						rewardedVideoAd.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								console.log('激励视频 广告显示失败')
							})
					})
			}
		}
	}
</script>

<style lang="less" scoped>
	.index {

		.count {
			padding: 20rpx;

			.name {
				margin-top: 10rpx;
			}
		}

		.list {
			padding: 20upx;

			.item {
				background: #FFD100;
				border-radius: 20upx;
				margin-bottom: 20upx;
				position: relative;
				padding: 60upx 40upx;

				image {
					position: absolute;
					width: 120upx;
					height: 120upx;
					right: 0upx;
					top: 0upx;
					opacity: 0.5;
				}

				.btns {
					display: flex;
					align-items: center;

					.cu-btn {
						background: #fff;
						padding: 0 40rpx;
						height: 60rpx;
						margin-left: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 30rpx;
						font-size: 28rpx;

					}
				}
			}
		}


		.add {
			position: fixed;
			right: 20upx;
			bottom: 40upx;
			background: #fff;
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			z-index: 9;

			image {
				width: 80upx;
				height: 80upx;
			}
		}

		.transfer {
			position: fixed;
			right: 20upx;
			bottom: 150upx;
			background: #fff;
			width: 80upx;
			height: 80upx;
			border-radius: 50%;
			z-index: 9;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24upx;
			border: 4upx solid #333;

		}
	}
</style>